<template>
  <div class="box-card" v-infinite-scroll="load" :infinite-scroll-disabled="count > 20">
    <ResourcesItem
      v-for="recommend in recommendList"
      :key="recommend.id"
      :cover="recommend.cover"
      :title="recommend.title"
      :statisticsBackup="recommend.statisticsBackup"
      :creatorBackup="recommend.creatorBackup"
      :video="recommend.moreBackup.videos[0].url"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ResourcesItem from "./ResourcesItem/index.vue";

export default defineComponent({
  name: "ResourcesList",
  components: {
    ResourcesItem,
  },
});
</script>

<script setup lang="ts">
import type { contentType } from "@/api";
interface propsDataType {
  recommendList: contentType[];
  count: number;
}
defineProps<propsDataType>();

const emit = defineEmits<{
  (event: "addCount"): void;
}>();

const load = () => {
  emit("addCount");
};
</script>

<style lang="less" scoped>
.box-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
